<template>
  <el-dialog
    title="上传文件"
    :visible.sync="centerDialogVisible"
    width="50%"
    center
  >
    <el-card>
      <el-form
        ref="orderForm"
        :model="queryParams"
        size="mini"
        label-width="60px"
      >
        <el-col :span="9">
          <el-form-item label="类型" prop="fileTypeId">
            <el-select
              v-model="queryParams.fileTypeId"
              placeholder="请选择类型"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in fileTypeOptions"
                :key="k"
                :label="fileTypeOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件名" prop="fileName">
            <el-input
              v-model="queryParams.fileName"
              type="text"
              placeholder="请输入文件名"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>

    <el-card>
      <el-upload
        class="upload-demo"
        ref="upload"
        drag
        action="fakeaction"
        :show-file-list="true"
        :http-request="uploadFn"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :auto-upload="true"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="saveWaybillFile"
        v-loading.fullscreen.lock="fullscreenLoading"
        >确定</el-button
      >
    </el-card>
  </el-dialog>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import { untransform } from "@/store/yg/common/uri";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  props: {
    fileTypeOptions: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    data: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      centerDialogVisible: false,
      queryParams: {
        fileTypeId: "",
        fileName: "",
        tempFilename: ""
      },
      action: "",
      feeData: [],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },
  created: function() {
    this.action =
      constant.API_SERVER +
      "/api/consume/upload?uri=/waybill/batchuploadfile/main&f=uploadWaybillFile&type=blank";
  },
  mounted() {},
  methods: {
    uploadFn(params) {
      //自定义上传文件
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf("pdf") !== -1,
        isLt4M = file.size / 1024 / 1024 < 4;
      this.queryParams.fileName = file.name;
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //  this.$message.error("只能上传pdf格式!");
      //  return;
      // }

      //if (!isLt4M) {
      //   this.$message.error("只能上传图片大小小于4M");
      //   return;
      //  }
      // 根据后台需求数据格式
      if (
        this.queryParams.fileTypeId === null ||
        "" === this.queryParams.fileTypeId
      ) {
        this.$message.error("请选择类型");
        return;
      }

      const form = new FormData();
      // 文件对象

      form.append("items[]", file);
      form.append("fileTypeId", this.queryParams.fileTypeId);
      form.append("theFileName", this.queryParams.fileName);
      this.fullscreenLoading = true;
      axios({
        method: "post",
        url: this.action,
        data: form
      })
        .then(response => {
          this.fullscreenLoading = false;
          if (response.data.code === 200) {
            this.queryParams.tempFilename = response.data.data["fileUrl"];
          } else {
            let msg = response.data.message ? response.data.message : '可能没配置权限【运单 -> 批量导入文件】';
            this.$notify.error({
              title: "错误",
              message: "上传失败!" + msg
            });
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
    },

    saveWaybillFile() {
      var param = {};
      param["fileTypeId"] = this.queryParams.fileTypeId;
      param["fileName"] = this.queryParams.fileName;
      param["waybillId"] = this.data["id"];
      param["fileUrl"] = this.queryParams.tempFilename;
      this.fullscreenLoading = true;
      ajax("saveWaybillFile", param).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("修改失败!");
            }
          } else {
            this.$message.success("修改成功!");
            this.centerDialogVisible = false;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>
